<header class="uc_head">
    <h3>百度地图</h3>
</header>
<center>
    <div id="box" style="padding:40px 30px">
        地址：<input type="text" name="address" id="address">
        <button id="search">搜索</button><button id="showmap">展示地图</button>
        <div id="show" style="width:300px;height:280px"></div>
        <div id="allview" style="width:300px;height:280px"></div>
    </div>
</center>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KYwYs1S40IiOXidwZMtTwZHASn4H9UFF"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    $("#showmap").click(function(){
        var address = $("#address").val();
        // alert(address);
        $.ajax({
            url:"{url:/ucenter/jing}",
            data:{address:address},
            type:"post",
            datatype:"json",
            success:function(res){
                
                var lng = res.lng;
                var lat = res.lat;
                var map = new BMap.Map("show");
			var point = new BMap.Point(lng,lat);
			map.centerAndZoom(point,12);
			var geoc = new BMap.Geocoder();    

			map.addEventListener("click", function(e){        
				var pt = e.point;
				geoc.getLocation(pt, function(rs){
					var addComp = rs.addressComponents;
					alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
				});        
			});            
}
        })
    })
    $("#search").click(function(){
    	var address=$("#address").val();
        $.ajax({
            success:function(res){
                
                var lng = res.lng;
                var lat = res.lat;
               	var panorama = new BMap.Panorama('allview');
	panorama.setPosition(new BMap.Point(lng,lat));
	panorama.addEventListener('position_changed', function(e){ //全景位置改变事件
	   panoramaCallBack(e);
	});
	panorama.addEventListener('pov_changed', function(e){ //全景视角改变事件
		panoramaCallBack(e);
	});
	function panoramaCallBack(e){ //事件回调函数
		if (e.type == 'onpov_changed') { 
			document.getElementById('svInfoText').innerHTML="全景视角为：<br/>"+"水平视角："+panorama.getPov().heading+"<br/>垂直视角："+panorama.getPov().pitch;
		}
		else if (e.type=='onposition_changed') {
			document.getElementById('svInfoText').innerHTML="全景位置点为："+panorama.getPosition().lng+","+panorama.getPosition().lat;
		}
	}
            }
        });
    });
</script>